<template>
  <div>
    <a-modal :title="title" wrapClassName="addModal" :visible="visible" :destroyOnClose="true" @cancel="handleCancel()" :footer="null" width="860px">
      <div class="scroll">
        <a-form-model ref="ruleForm" layout="vertical" :model="form" :rules="rules">
          <div class="row">
            <a-form-model-item label="任务名称" ref="name" prop="name">
              <a-input size="large" v-model="form.name" class="input" placeholder="请输入"></a-input>
            </a-form-model-item>
            <a-form-model-item label="任务类型" ref="type" prop="type">
              <a-select v-model="form.type" size="large" class="select" placeholder="请选择任务类型" :options="typeList">
              </a-select>
            </a-form-model-item>
          </div>

          <div class="row">
            <a-form-model-item label="开始时间" ref="startTime" prop="startTime">
              <a-date-picker showTime v-model="form.startTime" @change="
                  () => {
                    form.endTime = '';
                  }
                " class="input" size="large" />
            </a-form-model-item>
            <a-form-model-item label="结束时间" ref="endTime" prop="endTime">
              <a-date-picker showTime v-model="form.endTime" :disabled-date="disabledDate" :disabled-time="disabledDateTime" class="input" size="large" />
            </a-form-model-item>
          </div>
          <div>
            <a-form-model-item label="任务描述" ref="description" prop="description">
              <a-textarea placeholder="请输入任务描述" v-model="form.description" size="large" />
            </a-form-model-item>
          </div>
          <div class="row">
            <a-form-model-item label="提前提醒天数" ref="warnDay" prop="warnDay">
              <a-input-number size="large" v-model="form.warnDay" class="input" placeholder="请输入提前提醒天数"></a-input-number>
            </a-form-model-item>
            <a-form-model-item label="巡河次数" ref="patrolNumber" prop="patrolNumber" v-show="form.type === 0">
              <a-input-number size="large" v-model="form.patrolNumber" class="input" :min="0" :precision="0" placeholder="请输入巡河次数"></a-input-number>
            </a-form-model-item>
          </div>

          <div>
            <a-form-model-item label="河段" ref="reachIds" required :help="validateStatus == 'success' ? '' : '请选择河段'" :validate-status="validateStatus">
              <a-textarea :value="reachSelectedResult" readOnly :autoSize="true" class="input" style="resize: none" />
              <a-button type="primary" @click="selectReach" style="margin: 0 0 4px 38px">选择河段
              </a-button>
            </a-form-model-item>
          </div>
        </a-form-model>
      </div>
      <div class="submit-con">
        <a-button type="primary" icon="close-circle" ghost @click="handleCancel()" class="cancel">
          取消退出
        </a-button>
        <a-button type="primary" icon="check-circle" @click="save()" class="issue">
          保存
        </a-button>
      </div>
    </a-modal>
    <!-- <reach-ids-modal ref="reachIdsModal"
                     @select-done="onSelectDone"
                     :reach-ids="reachIds" /> -->
  </div>
</template>

<script>
import { message } from "ant-design-vue";
import _ from "lodash";
import moment from "moment";

export default {
  components: {},
  props: {
    title: {
      type: String,
      default: "新建任务"
    },
    clearDetail: {
      type: Function
    },
    detail: {
      type: Object
    },
    refresh: {
      type: Function
    }
  },
  data() {
    return {
      typeList: [],
      reachList: [],
      visible: false,
      rules: {
        name: [{ required: true, message: "请输入任务名称", trigger: "blur" }],
        type: [
          { required: true, message: "请选择任务类型", trigger: "change" }
        ],
        patrolNumber: [
          { required: true, message: "请输入巡河次数", trigger: "blur" }
        ],
        warnDay: [
          { required: true, message: "请选择提前提醒天数", trigger: "change" }
        ],
        startTime: [
          { required: true, message: "请选择开始时间", trigger: "change" }
        ],
        endTime: [
          { required: true, message: "请选择结束时间", trigger: "change" }
        ]
      },
      headers: null,
      form: {
        description: "",
        id: "",
        type: 1,
        name: "",
        startTime: "",
        endTime: "",
        warnDay: 30,
        patrolNumber: 1
      },
      reachIds: [],
      reachSelectedResult: "",
      validateStatus: "success"
    };
  },
  computed: {},
  watch: {
    detail: {
      handler(val) {
        if (val) {
          for (const key in val) {
            if (Object.hasOwnProperty.call(val, key)) {
              this.form[key] = val[key];
            }
          }
          if (val.list) {
            const ids = [];
            val.list.forEach(item => {
              ids.push(item.reachInfoId);
            });
            this.reachIds = ids;
          }
          this.form.startTime = moment(val.startTime);
          this.form.endTime = moment(val.endTime);
        }
      },
      deep: true
    },
    reachIds: {
      handler(ids) {
        if (ids) {
          const list = [];
          ids.forEach(id => {
            this.reachList.map(item => {
              if (item.value === id) {
                return list.push(item.title);
              }
            });
          });
          this.reachSelectedResult = list.toString();
        }
      },
      deep: true,
      immediate: true
    },

    visible(val) {
      if (val && this.title === "新建任务") {
        this.resetForm();
      }
    }
  },
  created() {},
  mounted() {
    this.getSelectList();
  },
  methods: {
    getSelectList() {
    },
    save() {
      if (this.reachIds.length === 0) {
        this.validateStatus = "error";
        return;
      }
      this.validateStatus = "success";
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          const params = _.cloneDeep(this.form);
          params.startTime = moment(params.startTime).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          params.endTime = moment(params.endTime).format("YYYY-MM-DD HH:mm:ss");
          params.reachIds = this.reachIds;
          if (
            moment(params.startTime).valueOf() >
            moment(params.endTime).valueOf()
          ) {
            message.error("开始时间不能晚于结束时间");
            return;
          }
          if (this.title === "新建任务") {
            this.add(params);
          } else {
            this.edit(params);
          }
        } else {
          return false;
        }
      });
    },
    onSelectDone(selectedkeys) {
      this.reachIds = selectedkeys;
      if (this.reachIds.length === 0) {
        this.validateStatus = "error";
      } else {
        this.validateStatus = "success";
      }
    },
    add() {
      this.visible = false;
      this.refresh();
      message.success("添加成功");
      this.resetForm();
    },
    edit() {
      this.visible = false;
      this.refresh();
      message.success("修改成功");
      this.resetForm();
    },
    resetForm() {
      this.form = {
        description: "",
        id: "",
        name: "",
        startTime: "",
        endTime: "",
        warnDay: 30,
        type: 1,
        patrolNumber: 1
      };
      this.clearDetail();
      this.reachIds = [];
      this.reachSelectedResult = "";
    },

    handleCancel() {
      this.visible = false;
      this.resetForm();
    },

    selectReach() {
      this.$refs.reachIdsModal.visible = true;
    },
    range(start, end) {
      const result = [];
      for (let i = start; i < end; i++) {
        result.push(i);
      }
      return result;
    },

    disabledDate(current) {
      return (
        current &&
        this.form.startTime !== "" &&
        this.form.startTime > moment(current).endOf("day")
      );
    },
    disabledDateTime() {
      if (this.form.startTime !== "") {
        const startHour = moment(this.form.startTime).get("hour");
        const startMinute = moment(this.form.startTime).get("minute");
        const startSecond = moment(this.form.startTime).get("second");
        return {
          disabledHours: () => this.range(0, 24).slice(0, startHour),
          disabledMinutes: () => this.range(0, 60).slice(0, startMinute),
          disabledSeconds: () => this.range(0, 60).slice(0, startSecond)
        };
      }
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep {
  .addModal {
    .ant-modal-body {
      padding: 8px 0 64px 0;
    }

    .scroll {
      padding: 0 80px;
      height: 530px;
      overflow-y: scroll;
    }

    .row {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }

    .input {
      width: 320px;
    }

    .is-center {
      padding: 0px !important;
      height: 31px !important;
      background: #fafafa;
      color: #434343;
    }

    .submit-con {
      text-align: center;

      .cancel {
        margin-right: 24px;
      }

      .cancel,
      .issue {
        width: 148px;
        height: 40px;
      }
    }

    .select {
      width: 320px;
    }
  }
}
</style>
